document.addEventListener('DOMContentLoaded', function () {
    // 获取按钮元素
    var rightArrowButton = document.querySelector('.button-arrow-right');
    var leftArrowButton = document.querySelector('.button-arrow-left');

    // 获取span-item元素
    var spanItem = document.querySelector('.span-item');

    // 获取所有span-item-box元素
    var spanItemBoxes = document.querySelectorAll('.span-item-box');

    // 设置初始偏移量
    var offset = 0;

    // 按钮点击事件处理程序
    rightArrowButton.addEventListener('click', function () {
        // 向右滚动
        offset -= 305; // 一个span-item-box的宽度
        spanItem.style.transform = 'translateX(' + offset + 'px)';

        // 判断是否到达最后一个元素，如果是则回到初始位置
        if (offset <= -(spanItemBoxes.length - 4) * 305) {
            offset = 0;
            spanItem.style.transform = 'translateX(' + offset + 'px)';
        }
    });

    leftArrowButton.addEventListener('click', function () {
        // 向左滚动
        offset += 305; // 一个span-item-box的宽度
        spanItem.style.transform = 'translateX(' + offset + 'px)';

        // 判断是否到达第一个元素，如果是则回到最后一个元素位置
        if (offset > 0) {
            offset = -(spanItemBoxes.length - 5) * 305;
            spanItem.style.transform = 'translateX(' + offset + 'px)';
        }
    });
});
